<!--  -->
<template>
    <div class="page-container">
        <div class="header-panel">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">

                <el-form-item label="时间">
                    <el-date-picker v-model="queryParams.tm" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                </el-form-item>

                <el-form-item label="fromCard">
                    <el-input v-model="queryParams.fromCard" placeholder="请输入fromCard" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item label="toCard">
                    <el-input v-model="queryParams.toCard" placeholder="请输入toCard" clearable style="width: 240px" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table v-loading="loading" :data="dataList" size="medium" height="calc(100% - 100px)">
            <el-table-column type="index" align="center" width="80"></el-table-column>
            <el-table-column label="fromCard" align="center" prop="fromCard" />
            <el-table-column label="toCard" align="center" prop="toCard" :show-overflow-tooltip="true" />
            <el-table-column label="时间" align="center" prop="time" :show-overflow-tooltip="true" />
            <el-table-column label="报文" align="center" prop="content" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-button slot="reference" @click="contentClick(scope.row)" type="text">{{ scope.row.content
                        }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="接收时间" align="center" prop="receiveTm" />
            <el-table-column label="状态" align="center" prop="status" :formatter="formatStatus" />

        </el-table>

        <el-pagination background style="text-align: center;margin-top: 10px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[50, 100, 200, 500]"
            :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>


        <el-dialog title="报文解析" :visible.sync="open">
            <div class="data-grid">
                <!-- 水位相关 -->
                <div class="data-card primary">
                    <div class="card-header">
                        <i class="fas fa-tint"></i>
                        <h3>雷达水位</h3>
                    </div>
                    <div class="card-value" id="radar-water-level">{{ jsonData['雷达水位'] }}</div>
                    <div class="card-unit">米</div>
                </div>

                <div class="data-card primary">
                    <div class="card-header">
                        <i class="fas fa-arrow-up"></i>
                        <h3>雷达空高</h3>
                    </div>
                    <div class="card-value" id="radar-air-height">{{ jsonData['雷达空高'] }}</div>
                    <div class="card-unit">米</div>
                </div>

                <div class="data-card">
                    <div class="card-header">
                        <i class="fas fa-compress-alt"></i>
                        <h3>压力水位</h3>
                    </div>
                    <div class="card-value" id="pressure-water-level">{{ jsonData['压力水位'] }}</div>
                    <div class="card-unit">米</div>
                </div>

                <div class="data-card">
                    <div class="card-header">
                        <i class="fas fa-wave-square"></i>
                        <h3>多普勒水位</h3>
                    </div>
                    <div class="card-value" id="doppler-water-level">{{ jsonData['多普勒水位'] }}</div>
                    <div class="card-unit">米</div>
                </div>

                <!-- 雨量相关 -->
                <div class="data-card warning">
                    <div class="card-header">
                        <i class="fas fa-cloud-rain"></i>
                        <h3>当前雨量</h3>
                    </div>
                    <div class="card-value" id="current-rainfall">{{ jsonData['当前雨量'] }}</div>
                    <div class="card-unit">毫米</div>
                </div>

                <div class="data-card warning">
                    <div class="card-header">
                        <i class="fas fa-cloud-showers-heavy"></i>
                        <h3>累计雨量</h3>
                    </div>
                    <div class="card-value" id="total-rainfall">{{ jsonData['累计雨量'] }}</div>
                    <div class="card-unit">毫米</div>
                </div>

                <!-- 环境参数 -->
                <div class="data-card info">
                    <div class="card-header">
                        <i class="fas fa-thermometer-half"></i>
                        <h3>温度</h3>
                    </div>
                    <div class="card-value" id="temperature">{{ jsonData['温度'] }}</div>
                    <div class="card-unit">摄氏度</div>
                </div>

                <div class="data-card info">
                    <div class="card-header">
                        <i class="fas fa-tint"></i>
                        <h3>湿度</h3>
                    </div>
                    <div class="card-value" id="humidity">{{ jsonData['湿度'] }}</div>
                    <div class="card-unit">相对湿度</div>
                </div>

                <div class="data-card info">
                    <div class="card-header">
                        <i class="fas fa-compress-arrows-alt"></i>
                        <h3>大气压</h3>
                    </div>
                    <div class="card-value" id="atmospheric-pressure">{{ jsonData['大气压'] }}</div>
                    <div class="card-unit">千帕</div>
                </div>

                <div class="data-card info">
                    <div class="card-header">
                        <i class="fas fa-thermometer-empty"></i>
                        <h3>多普勒温度</h3>
                    </div>
                    <div class="card-value" id="doppler-temperature">{{ jsonData['多普勒温度'] }}</div>
                    <div class="card-unit">摄氏度</div>
                </div>

                <!-- 流量相关 -->
                <div class="data-card success">
                    <div class="card-header">
                        <i class="fas fa-stream"></i>
                        <h3>瞬时流量</h3>
                    </div>
                    <div class="card-value" id="instantaneous-flow">{{ jsonData['瞬时流量'] }}</div>
                    <div class="card-unit">立方米/秒</div>
                </div>

                <div class="data-card success">
                    <div class="card-header">
                        <i class="fas fa-chart-line"></i>
                        <h3>累计流量</h3>
                    </div>
                    <div class="card-value" id="total-flow">{{ jsonData['累计流量'] }}</div>
                    <div class="card-unit">立方米</div>
                </div>

                <div class="data-card success">
                    <div class="card-header">
                        <i class="fas fa-running"></i>
                        <h3>流速</h3>
                    </div>
                    <div class="card-value" id="flow-velocity">{{ jsonData['流速'] }}</div>
                    <div class="card-unit">米/秒</div>
                </div>

                <!-- 系统状态 -->
                <div class="data-card system">
                    <div class="card-header">
                        <i class="fas fa-battery-three-quarters"></i>
                        <h3>电源电压</h3>
                    </div>
                    <div class="card-value" id="power-voltage">{{ jsonData['电源电压'] }}</div>
                    <div class="card-unit">伏特</div>
                </div>

                <div class="data-card system">
                    <div class="card-header">
                        <i class="fas fa-signal"></i>
                        <h3>信号质量</h3>
                    </div>
                    <div class="card-value" id="signal-quality">{{ jsonData['信号质量'] }}</div>
                    <div class="card-unit">分贝</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            queryParams: {
                tm: [],
                status: 0
            },
            // 遮罩层
            loading: true,
            open: false,
            // 表格数据
            dataList: [],
            //分页条件
            page: {
                pageNum: 1,
                pageSize: 50,
                total: 0
            },
            jsonData: {
                name: "vue-json-viewer",
                version: "2.2.2",
                author: "github: chenfengjw163",
                features: ["折叠/展开", "复制JSON", "语法高亮", "自定义主题"],
                isVue2Compatible: true
            },
        }
    },
    computed: {},
    created() {
        this.getList()
    },
    mounted() { },
    methods: {
        handleQuery() {
            this.page.current = 1;
            this.getList()
        },
        //改变页数据量
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getList()
        },
        //改变当前页
        handleCurrentChange(val) {
            this.page.pageNum = val
            this.getList()
        },
        getList() {
            this.loading = true;
            const tm = this.queryParams.tm
            const btm = tm && (tm.length > 0 ? tm[0] : null)
            const etm = tm && (tm.length > 1 ? tm[1] : null)
            this.$request({
                url: '/baseApi/cus_orimes/pageList',
                method: 'get',
                params: {
                    fromCard: this.queryParams.fromCard,
                    toCard: this.queryParams.toCard,
                    btm, etm, ...this.page, status: 0
                }
            }).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.dataList = res.data;
                    this.page.total = res.total
                }
            })
        },
        contentClick(row) {
            this.jsonData = JSON.parse(row.msgJson)
            this.open = true
        },
        formatStatus(row, column, cellValue, index) {
            return cellValue === 0 ? '正常' : '异常'
        }
    },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

/* Data Cards */
.data-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 8px 32px rgba(130, 190, 247, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.data-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.data-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.data-card:hover::before {
    opacity: 1;
}

.card-value {
    font-size: 1cqi;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 5px;
    line-height: 1;
}

.card-unit {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}
</style>